<template>

  <div class="father">
    <div class="InvoiceTmpDiv" id="pdfDom" style="padding-bottom: 20px;border-bottom: 1px">
      <div class="row" style="    border-top: none;
    border-left: none;
    margin-top: 15px;
    border-right: none;">

        <div class="col  title col_18 no-border">配送单</div>
        <div class="extra col_6 no-border">
          <div>
            <span class="label title-label">配送地址</span>：
            <span class="content">{{receiptInfo.address}}</span>
            <span class="label title-label">电话号码</span>：
            <span class="content">{{receiptInfo.phone}}</span>
            <span class="label title-label">客户姓名</span>：
            <span class="content">{{receiptInfo.name}}</span>
            <span class="label title-label">送货日期</span>：
            <span class="content">{{receiptInfo.date}}</span>
          </div>

        </div>
      </div>
      <div class="row height40" >
        <div class="col  col_1 no-border">商品名称</div>
        <div class="col  col_1">商品数量</div>
        <div class="col  col_1">单价</div>
      </div>
      <div class="row height30" v-for="item in data">
        <div class="col  col_1 no-border col9">{{item.goodName}}</div>
        <div class="col  col_1 col9">{{item.goodCount}}</div>
        <div class="col  col_1 col9">{{item.price}}</div>
      </div>
      <div class="row" style="text-align: left">
        <div class="col  col_15 no-border" style="text-align: left">价税合计（大写）{{getChinese()}}</div>
        <div class="col  no-border" style="borderLeft: none">
          （小写）<span>￥{{receiptInfo.totalPrice}}</span>
        </div>
      </div>
      <div class="row height40" style="text-align: left">
        <span class="" style="margin-left: 20px">备注</span>：
      </div>
      <div class="last-row"></div>
      <div class="extra col_66 no-border" style="text-align: left;">
        <div>
          <span class="label title-label">送货单位及经手人签字（盖章）:</span>
        </div>
      </div>

    </div>
    <div style="margin-top: 10px">
      <el-button type="primary" @click="getPrintScreen" :loading="isLoading">打印</el-button>
    </div>
  </div>


</template>


<script>

import {request_financial} from "@/util/request";
import toChineseNumber from '@/util/toChineseNumber'
import axios from "axios";
import htmlToPdf from "@/util/htmlToPdf";

export default {
  name: "test",
  data(){
    return{
      isLoading:false,
      receiptInfo:{
        name: "瑞希",
        address:"山东省济南市",
        phone:"19527906091",
        date:'    年  月  日',
        totalPrice: 222,
      },
      data: [
        {
          goodCount: 12,
          goodId: "G690BJMBXYW9BG7092925865797",
          goodName: "巧乐角面包",
          goodOrderId: "1706dd69244511eeaa0a5c3a45dad1b2\n",
          measure:"克",
          price:"2.00",
          rate:"0.1",
          specificationsModels: "无",
          tax:"0",
          invoiceId: "2602537823764480",

        },
        {
          goodCount: 12,
          goodId: "G690BJMBXYW9BG7092925865797",
          goodName: "巧乐角面包",
          goodOrderId: "1706dd69244511eeaa0a5c3a45dad1b2\n",
          measure:"克",
          price:"2.00",
          rate:"0.1",
          specificationsModels: "无",
          tax:"0",
          invoiceId: "2602537823764480"
        },
        {

        },
        {

        }
      ]
    }
  },
  methods:{
    getPrintScreen() {
      // 调用htmlToPdf工具函数
      htmlToPdf.getPdf('配送单');
      // 定时器模拟按钮loading动画的时间
      this.isLoading = true
      setTimeout(() => {
        this.isLoading = false
      }, 1000);

    },
    getReceiptInfo(){

      request_financial.post("invoice/get",{
        orderId:"fe97c80221fb11eeaa0a5c3a45dad1b2"
      }).then(res=>{
        console.log(res.data)
        this.receiptInfo=res.data.data
      })
    },
    getChinese(){
      return toChineseNumber(this.receiptInfo.totalPrice)
    },
    setData() {
      console.log(22222222)
      let data1 = JSON.parse(sessionStorage.getItem('data'))
      let formData = new FormData();
      formData.append('distributionOrderId',data1.distributionTaskOrderId)
      formData.append('orderId',data1.orderId)
      axios.post("http://localhost:1060/taskOrder/getPrintTaskOrder",formData).then(res=>{
        res = res.data;
        console.log(res)
        if (res.code == '200') {
          this.data = res.data.list
          this.receiptInfo.address = res.data.address
          this.receiptInfo.name = res.data.customerName
          this.receiptInfo.totalPrice = res.data.totalPrice
          this.receiptInfo.phone = res.data.tele
          console.log(this.receiptInfo)
        }
      })
    }
  },
  beforeMount() {
    this.setData()
  },
  created() {

  }
}
</script>

<style scoped>

.father{
  display: grid;
  place-items: center; /* 水平和垂直居中 */
  height: 100vh; /* 设置容器高度为视口高度 */
  padding: 10px 20px;

}

.InvoiceTmpDiv  {
  box-shadow:7px 7px 9px 5px #918f8f;/*盒子阴影*/;
  font-size: 15px;
  width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}


.InvoiceTmpDiv  .title {
  font-size: 26px;
  color: #B16363;
  text-align: center;
  line-height: 56px;
}

.InvoiceTmpDiv  .extra {
  color: #B15B16;
}

.InvoiceTmpDiv  .extra .content {
  color: #181818;
}

.InvoiceTmpDiv  .height40 {
  height: 40px;
  text-align: center;
}
.InvoiceTmpDiv  .height30 {
  height: 30px;
  text-align: center;
}

.InvoiceTmpDiv  .row {
  border: 1px solid #B16363;
  border-bottom: none;
  color: #B15B16;
}

.InvoiceTmpDiv  .row .content {
  color: #181818;
}

.InvoiceTmpDiv  .last-row .content {
  color: #181818;
}

.InvoiceTmpDiv  .last-row {
  color: #B15B16;
  border-top: 1px solid #B16363;
  border-left: none;
  border-right: none;
  height: 25px;
}

.InvoiceTmpDiv  .label {
  width: 200px;
  text-align-last: justify;
  text-align: justify;
  margin-left: 10px;
}

.col_66{
  width: 40%;
}
.InvoiceTmpDiv  .title-label {
  width: 52px;
}
.col9 {
  font-size: 10px;
}
.InvoiceTmpDiv  .col_1 {
  width: 33.3%;
}

.InvoiceTmpDiv  .col_2 {
  width: 8.33%;
}

.InvoiceTmpDiv  .col_3 {
  width: 12.5%;
}

.InvoiceTmpDiv  .col_5 {
  width: 20.83%;
}

.InvoiceTmpDiv  .col_6 {
  width: 100%;
  margin-bottom: 10px;
}

.InvoiceTmpDiv  .col_7 {
  width: 29.16%;
}

.InvoiceTmpDiv  .col_8 {
  width: 33.33%;
}

.InvoiceTmpDiv  .col_14 {
  width: 58.33%;
}

.InvoiceTmpDiv  .col_15 {
  width: 62.5%;
}

.InvoiceTmpDiv  .col_17 {
  width: 70.83%;
}

.InvoiceTmpDiv  .col_18 {
  width: 100%;
}

.InvoiceTmpDiv  .col_24 {
  width: 100%;
}

.InvoiceTmpDiv  .col {
  display: inline-block;
  padding: 8px;
  box-sizing: border-box;
  vertical-align: middle;
  border-left: 1px solid #B16363;
  height: 100%;
}

.InvoiceTmpDiv  .col.no-border {
  border-left: none;

}

.InvoiceTmpDiv  .col .text-center {
  text-align: center;
}
.InvoiceTmpDiv  .item {
  text-align: center;
  color: #181818;
  padding: 4px 0;
}
</style>